<html>
    <head>
        <title>3D旋转</title>
        <style>
        body{
            background-color: black;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            perspective: 1000px;
           


        }
        main{
            height: 300px;
            width: 300px;
            transform-style: preserve-3d;
            animation: spin 10s linear;
            animation-iteration-count: infinite;
            background-color: wheat;
        }
        img{
            height: 300px;
            width:300px;
            position: absolute;

        }
        #top{
            transform: translateY(-150px) rotateX(90deg);
        }
        #bottom{transform: translateY(150px) rotateX(90deg);
        
        }
        #left{
            transform: translateX(-150px) rotateY(90deg);
        
        }
        #right{
            transform: translateX(150px) rotateY(90deg);
        }
        #front{
            transform: translateZ(150px);
        }
        #back{
            transform: translateZ(-150px);
            }
            @keyframes spin{
                0%{
                    transform: rotateX(0) rotateY(0);

                }
                100%{transform: rotateX(360deg) rotateY(360deg);

                }


            }
        
        
        </style>
    </head>
    <body>
        <main>
            <img src="1.jpg" alt="" id="top">
            <img src="2.jpg" alt="" id="bottom">
            <img src="3.jpg" alt="" id="left">
            <img src="4.jpg" alt="" id="right">
            <img src="5.jpg" alt="" id="front">
            <img src="6.jpg" alt="" id="back">



        </main>
    </body>
</html>